<%@page import="java.util.HashSet"%>
<%@page import="java.util.Set"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@page import="com.mconnect.msurvey.controller.UserManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panel Admina</title>
<link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
 <link rel="stylesheet" href="js/jQuery/demos.css">
 	<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.position.js"></script>
	<script src="js/jQuery/ui/jquery.ui.tooltip.js"></script>
	<script src="js/jquery.validate.js" type="text/javascript"></script>
	<script src="js/messages_pl.js" type="text/javascript"></script>
 	<style>
	  	.errorMessage{
	  		color: red;
	  		font-style: italic;
	  	}
	  	.formularz FIELDSET { border: none; }
		.formularz LEGEND   { font-size: 1.1em; font-weight: bold; margin: 0; padding: 0 0 5px 0; color: #C02942;}
 
		.formularz LABEL        { color: #C02942; display: block; font-size: 1.1em; font-weight: bold; margin: 0; padding: 0 0 5px 0; }
		.formularz LABEL.error  { background: #ECD078; color: #C02942; margin: 5px 0 10px 0; padding: 5px; width: 90%; }
 
		.formularz INPUT,
		.formularz TEXTAREA       { border: 1px solid #542437; color: #542437; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; padding: 5px; width: 288px; }
		.formularz INPUT:focus,
		.formularz TEXTAREA:focus { border: 1px solid #53777A; }
 
		.formularz INPUT[type=submit] { background: #53777A; border: 1px solid
	  	
	label {
		display: inline-block;
		width: 5em;
	}
	</style>
	<script>
		$(function() {
			
			jQuery(document).ready(function(){
			    jQuery("#form").validate();
			  });
			
		});
		
		
	</script>
	
	<script type="text/javascript">
		function removeRow(then) {
			$(then).parents('tr').remove();
		}
		function responderTable_addRow() {
			var content = $('#responderTable').find('.prototype').html();
			$('#responderTable').find('.content').append('<tr class="last">'+content+'</tr>');
			return $('#responderTable').find('.content').find('tr.last');
		}
		
		function recommendTable_addRow() {
			var content1 = $('#recommendTable').find('.prototype1').html();
			$('#recommendTable').find('.content1').append('<tr class="last">'+content1+'</tr>');
			return $('#recommendTable').find('.content1').find('tr.last');
		}
		
		</script>
 
</head>
<body>
	<% UserManager uM = new UserManager();
		Set<User> loginsList = new HashSet<User>();
		loginsList = uM.getUsersFromDB();
	%>
 
	
	
	<h2 style="text-align: center;">Dodaj nową kampanie</h2>
	<br /><br />
	<center>
	<% if(!loginsList.isEmpty()){ %>
	<form action="saveNewPlan" method="post" id="form" class="formularz">
		<table width="400px;" >
			<tr>
				<td><s:textfield name="plan.planName" label="Nazwa Kampani" id="plan" cssClass="required" /></td>
				<td><div class="height_10"></div></td>
			</tr>
			<tr>
				<td><s:textfield name="plan.goal"  label="Cel" id="goal" cssClass="required number"  /> </td>
				<td><div class="height_10"></div></td>
			</tr>
			<tr>
				<td><s:textfield name="plan.days"  label="Ilość dni" id="days" cssClass="required number"    /></td>
				<td><div class="height_10"></div></td>
			</tr>
			<tr>
				<td><s:textfield name="plan.hours"  label="Ilość godzin" id="hours" cssClass="required number"   /></td>
				<td><div class="height_10"></div></td>
			</tr>
			<tr>
				<td><label for="typeOfSurvey">Wybierz typ ankiety</label></td>
				<td>
					<select name="plan.typeOfSurvey" id="typeOfSurvey">
						<option value="typical" style="width: 140px;">Standardowa</option>
						<option value="technical">Techniczna</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><label for="user">Wybierz ankieterów</label></td>
				<td>
					<div style="overflow:auto; max-height: 100px; margin-top: 20px;" id="users" class="required">
						
								<%for(User user : loginsList){ %>
<%-- 								<input type="checkbox" id="check<%=user.getId_user() %>" name="id" value="<%= user.getId_user() %>" title="Login: <%=user.getLogin() %>" > --%>
<%-- 								<label class="aa" style="width: 150px;" for="check<%=user.getId_user() %>"><%=" " + user.getFirstname() + " " + user.getLastname() %></label> --%>
								<table id="user">
									<tr>
										<td width="200px;"><%=" " + user.getFirstname() + " " + user.getLastname() %></td>
										<td><input type="checkbox"  name="id" value="<%= user.getId_user() %>" title="Login: <%=user.getLogin() %>" style="width: 20px;" id="users" onclick="this.form.elements['save'].disabled = !this.checked" ></td>
									</tr>
								</table>
						
							<%} %>
						
					</div>
				</td>
			</tr>
		</table>
		
		<div style="width: 500px; margin-top: 20px; max-width: 500px;" id="priceList">
		<label for="priceList" style="text-align: center">Cennik</label>	
		<table id="responderTable"  style="text-align: center; ">
				<thead class="title">
					<tr>
						<th width="200px" colspan="3" >Cena za 1 ankietę</th>
						<th width="200px" colspan="4" >Ilość ankiet</th>
						<th width="50px" colspan="2" ></th>
						<th></th>
					</tr>
				</thead>
				<tbody class="content">
					<tr style="display:none;" class="prototype">
						<td style="width: 60px;"></td>
						<td style="width: 60px;"><input type="text" name="price1Survey" class="required number"  style="width: 50px;" /></td>
						<td style="text-align: left;">zł</td>
						<td >od</td>
						<td ><input type="text" name="begin" class="required number"  style="width: 50px;"/></td>
						<td >do </td>
						<td ><input type="text" name="end" class="required number"  style="width: 50px;"/></td>
						<td><a title="Usuń" onclick="removeRow(this)" href="#"><img src="resources/images/delete.png" /></a></td>
									
					</tr>
					<tr >
						<td style="width: 60px;"></td>
						<td style="width: 60px;"><input type="text" name="price1Survey" class="required number"  style="width: 50px;" /></td>
						<td style="text-align: left;">zł</td>
						<td >od</td>
						<td ><input type="text" name="begin" class="required number"  style="width: 50px;"/></td>
						<td >do </td>
						<td ><input type="text" name="end" class="required number"  style="width: 50px;"/></td>
						<td style="width: 25px;"><a title="Dodaj" onclick="responderTable_addRow()" href="#"><img src="resources/images/add.png" /></a></td>
					</tr>
				</tbody>
			</table>
			
			<table id="recommendTable"  style="text-align: center; margin-top: 30px;">
				<thead class="title">
					<tr>
						<th width="200px" colspan="3" >Cena za 1 polecenie</th>
						<th width="200px" colspan="4" >Ilość poleceń</th>
						<th width="50px" colspan="2" ></th>
						<th></th>
					</tr>
				</thead>
				<tbody class="content1">
					<tr style="display:none;" class="prototype1">
						<td style="width: 60px;"></td>
						<td style="width: 60px;"><input type="text" name="price1Recommend" class="required number"  style="width: 50px;" /></td>
						<td style="text-align: left;">zł</td>
						<td >od</td>
						<td ><input type="text" name="beginRecommend" class="required number"  style="width: 50px;"/></td>
						<td >do </td>
						<td ><input type="text" name="endRecommend" class="required number"  style="width: 50px;"/></td>
						<td><a title="Usuń" onclick="removeRow(this)" href="#"><img src="resources/images/delete.png" /></a></td>
									
					</tr>
					<tr >
						<td style="width: 60px;"></td>
						<td style="width: 60px;"><input type="text" name="price1Recommend" class="required number"  style="width: 50px;" /></td>
						<td style="text-align: left;">zł</td>
						<td >od</td>
						<td ><input type="text" name="beginRecommend" class="required number"  style="width: 50px;"/></td>
						<td >do </td>
						<td ><input type="text" name="endRecommend" class="required number"  style="width: 50px;"/></td>
						<td style="width: 25px;"><a title="Dodaj" onclick="recommendTable_addRow()" href="#"><img src="resources/images/add.png" /></a></td>
					</tr>
				</tbody>
			</table>
			
			<table>
				<tr>
					<td width="200px;" colspan="2">&nbsp</td>
				</tr>
				<tr>
					<td colspan="2" align="center" id="saveForm"><input type="submit"  value="Zapisz" name="save" disabled="disabled"  style="width: 120px; height: 30px; background-color: #e6e6e6; "  /></td>
				</tr>
			</table>
		</div>
		
	</form>
	<%}else{ %>
		<div class="ui-widget" style="width: 80%;  margin-top: 20px;">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
				<strong>Brak wolnych ankieterów.</strong> <br /><br /> Aby stworzyć nowy plan ankiet, musisz dodać nowych ankieterów lub zakończyć trwające plany.
				</p>
			</div>
		</div>
	<%} %>
	</center>
</body>
</html>